<template>
    <div class="fileContent">
        <div class="aside">
            <div :class="['aside-item', activeIndex == index ? 'active' : '']" v-for="(item, index) in asideList"
                @click="handleItem(item, index)" :key="index">
                <div class="icon"></div>
                <div class="name">{{ item.label }}</div>
            </div>
            <div class="add">+添加类型</div>
        </div>
        <div class="content">
            <div class="titleSearch">
                <div class="search">
                    <i class="el-icon-search"></i>
                    搜索云盘内文件
                </div>
            </div>
            <div class="title">{{ title }}</div>
            <div class="fileBox">
                <div class="edit">
                    <div class="left">
                        <input type="checkbox">
                        <span class="total">共{{ curFileList.length }}项</span>
                    </div>
                    <div class="right">
                        <div class="sort">
                            <i class="el-icon-sort"></i>
                            <span>{{ tip }}</span>
                        </div>
                        <div class="change">
                            <i class="el-icon-s-operation"></i>
                        </div>
                    </div>
                </div>
                <div class="fileWrapper">
                    <div class="fileItem" v-for="(item, index) in fileList" :key="index">
                        <div class="neir">
                            <div class="imgBox">
                                <img src="@/assets/img/wjj.png" alt="">
                            </div>
                            <div class="name">{{ item.name }}</div>
                            <div class="date">{{ item.time }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {

    data() {
        return {
            title: '',
            tip: '按创建时间排序',
            asideList: [
                {
                    label: '全部文件',
                },
                {
                    label: '相册'
                }
            ],
            activeIndex: 0,
            curFileList: [
                {
                    name: '1.png',
                    time: '2021-07-15 16:30',
                },
            ],
            fileList: [
                {
                    type: 'folders',
                    name: '文件夹1',
                    time: '2021-07-15 16:30'
                }
            ]
        };
    },
    created() {
        this.title = this.asideList[this.activeIndex].label;

    },

    mounted() {

    },

    methods: {
        handleItem(item, index) {
            this.activeIndex = index;
        }
    },
};
</script>

<style lang="less" scoped>
.fileContent {
    width: 100%;
    height: 100%;
    display: flex;

    .aside {
        width: 180px;
        height: 100%;
        padding: 15px;
        border-right: 1px solid rgba(132, 133, 141, .2);

        .aside-item {
            height: 40px;
            padding: 8px 3px 8px 7px;
            display: flex;
            align-items: center;
            border-radius: 12px;
            cursor: pointer;
            margin-bottom: 5px;

            .icon {
                height: 24px;
                width: 24px;
                background-color: red;
                margin-right: 15px;
            }

            .name {
                color: #25262B;
                font-size: 14px;
                flex: 1;
            }

            &:hover {
                background-color: #f5f5f6;
            }
        }

        .active {
            background-color: #ebebed !important;
        }

        .add {
            height: 40px;
            padding: 8px 3px 8px 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            cursor: pointer;
            color: #25262B;
            font-size: 14px;

            &:hover {
                background-color: #f5f5f6;
            }

        }
    }

    .content {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 20px 40px 20px 40px;

        .titleSearch {
            height: 54px;
            display: flex;
            // justify-content: center;
            align-items: center;

            .search {
                width: 280px;
                height: 40px;
                border-radius: 8px;
                background-color: #f6f6f7;
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #25262b5c;
                cursor: pointer;

                i {
                    margin: 0 8px 0 8px;

                    &::before {
                        font-size: 15px;
                    }
                }
            }
        }

        .title {
            -webkit-app-region: no-drag;
            color: #333;
            font-size: 18px;
            line-height: 1.4;
            font-weight: 600;
            max-width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            height: 30px;
            margin: 20px 0;
        }

        .fileBox {
            flex: 1;
            display: flex;
            flex-direction: column;

            .edit {
                height: 28px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 12px;

                .left {
                    display: flex;
                    align-items: center;

                    .total {
                        margin-left: 10px;
                        font-size: 12px;
                        color: #25262BB8;
                    }
                }

                .right {
                    display: flex;
                    align-items: center;

                    .sort {
                        height: 28px;
                        cursor: pointer;
                        border-radius: 3px;
                        display: flex;
                        align-items: center;
                        padding: 0 8px;

                        &:hover {
                            background-color: #f5f5f6;
                        }

                        i {
                            margin-right: 5px;
                        }

                        font-size: 12px;
                        color: #25262BB8;

                        span {
                            // color: #25262B;

                        }
                    }

                    .change {
                        cursor: pointer;
                        border-radius: 3px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0 8px;
                        width: 28px;
                        height: 28px;
                        font-size: 14px;
                        color: #25262BB8;

                        &:hover {
                            background-color: #f5f5f6;
                        }
                    }
                }
            }

            .fileWrapper {
                flex: 1;
                display: flex;
                flex-wrap: wrap;

                .fileItem {
                    width: 133px;
                    height: 207px;
                    cursor: pointer;

                    .neir {
                        padding: 8px;
                        border-radius: 8px;
                        // height: 144px;

                        &:hover {
                            background-color: #f5f5f6;
                        }

                        .imgBox {
                            height: 90px;

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .name,
                        .date {
                            display: flex;
                            justify-content: center;
                            font-size: 14px;
                            color: #25262B;
                        }

                        .name {

                            margin: 5px 0;
                        }

                        .date {
                            font-size: 12px;
                            color: #25262b5c;

                        }
                    }


                }
            }
        }
    }
}
</style>